<template>
  <section>
    <div class="title">签到历史记录</div>
    <div class="p-2_ cal d-flex align-items-center flex-wrap-wrap">
      <div class="text-center card" v-for="day in days" :key="day"> 
        <h2>{{showThisDay(day)}}</h2>
        <p class="radio">
          <i :class="[validateThisActive(day) != -1 ? 'cubeic-right' : 'cubeic-round-border']"></i>
        </p>
      </div>
    </div>
  </section>
</template>

<script>
import {findSignInList} from 'api/SignInApi'

import { findIndex } from "utils/Base";

import moment from 'moment/moment'
import bus from 'utils/EventBus'

export default {
  name: 'SignHistory',
  data () {
    return {
      month: 0,
      days: [],
      signInList: []
    }
  },
  methods: {
    showThisDay(day) {
      return (this.month < 10 ? "0" + this.month : this.month) + "-" + day;
    },
    validateThisActive (date) {
      return findIndex(
        this.signInList,
        item => moment(item.signDay).format("DD") == date
      )
    },
    getDays () {
      const date = new Date();
      this.month = date.getMonth() + 1
      this.getCurrentMoneyDays();
    },
    getCurrentMoneyDays() {
      const d = new Date()
      d.setMonth(this.month)
      d.setDate(0)
      const days = d.getDate();

      for(let i = 1; i <= days; i++) {
        if(i < 10)
          this.days.push(`0${i}`)
        else  this.days.push(i)
      }
    },
    findSignInList () {
      findSignInList ({})
        .then(res => {
          if(res.meta.success) {
            this.signInList = res.data;
          }
        });
    }
  },
  created () {
    this.getDays();
    this.findSignInList()
  },
  mounted () {
    bus.$on('notifyChangeList', () => {
      this.findSignInList()
    })
  }
}
</script>

<style lang="stylus" scoped>
section {
  background #FFF

  .title {
    font-size 18px
    font-weight 500
    text-align center
    padding 10px 0
  }  

  .cal {
    div {
      flex 0 0 18vw
      margin-left 5vw
      margin-right 5vw
      margin-top 3vw
      margin-bottom 3vw
      background #f9feff
      max-width 15vw
      height 75px
      border-radius 5px
      overflow hidden

      h2 {
        background $colorAccount
        color #ffffff
        height 25px
        line-height 25px
        font-size 14px
      }

      .radio {
        line-height 50px

        i {
          font-size 20px
        }
      }

      &:nth-of-type(5n) {
        margin-right 0vw
      }
      &:nth-of-type(1n) {
        margin-left 0vw
      }
    }
  }
}
</style>

